import { Component, OnInit } from '@angular/core'
import { NavigationEnd, Router } from '@angular/router'

import 'rxjs/add/operator/do'
import 'rxjs/add/operator/filter'

const isNavEnd = (x) => x instanceof NavigationEnd

const breadcrumbs = [
  { '': { title: '主页', url: '' } },
  { 'breads': { title: '面包屑', url: '/breads' } },
  {
    'a': { title: 'A', url: '/breads/a' },
    'b': { title: 'B', url: '/breads/b' }
  }
]

@Component({
  selector: 'app-breadcrumb',
  templateUrl: './breadcrumb.component.html',
  styleUrls: [ './breadcrumb.component.css' ]
})
export class BreadcrumbComponent implements OnInit {
  urls = []

  constructor(private router: Router) {
  }

  ngOnInit() {
    this.router.events.filter(isNavEnd).subscribe(e => {
      const segments = e.url.split('/')
      this.urls = segments.map((s, idx) => breadcrumbs[ idx ][ s ])
    })
  }
}
